<template>
    <el-menu ellipsis class="el-menu-popper-demo" mode="horizontal" :popper-offset="16" style="max-width: 100%">
        <h3 style="margin-right: 100px;">社区动态</h3>
        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :disabled="disabled"
                :background="background" layout="total, prev, pager, next, jumper" :total="total"
                @current-change="handleCurrentChange" />
        </div>
    </el-menu>
    <el-card class="box-card " v-for="(data, index) in tableData[0]" style="min-height: 100px;">
        <div class="el-card__body mid">
            <img class="left" :src="'http://' + data.image1" style="height: 200px" />
            <div class="right">
                <el-card style="max-width: 480px">
                    <template #header>内容详情</template>
                    <p>作者：{{ data.user_id.user }}</p>
                    <p>标题：{{ data.title }}</p>
                    <p>内容：{{ data.content }}</p>
                    <p>发布时间：{{ formatter.format(new Date(data.create_time)) }}</p>
                    <p>点赞量：{{ data.giveLike }}</p>
                </el-card>
            </div>
            <div class="content">
                <h3>评论</h3>
                <el-button type="primary" @click="showDialog(data.id, index)"
                    style="margin-bottom: 50px; width: 70px;">评论</el-button>
                <el-table :data="data.comments_Com" height="250" style="width: 100%">
                    <el-table-column type="expand">
                        <template #default="props">
                            <div m="4">
                                <p m="t-0 b-2">内容: {{ props.row.content }}</p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="Date" prop="create_time" />
                    <el-table-column label="Name" prop="user.name" />
                </el-table>
            </div>
            <div class="last_right_like">
                <el-button v-if="data.community_upvote_object.length == 0 || data.community_upvote_object[0].user_upvote_status.likeStatus == '0'" 
                type="primary" @click="likeClick(data.id, index, 'true')"
                    style="margin-bottom: 50px; width: 70px;">点赞</el-button>
                <el-button v-else type="primary" @click="nolikeClick(data.id, index)"
                    style="margin-bottom: 50px; width: 70px;">取消点赞</el-button>
            </div>
        </div>
    </el-card>
    <el-dialog v-model="dialogFormVisible" title="评论" width="500">
        <el-form ref="ruleFormRef" :model="form">
            <el-form-item>
                <el-input v-model="form.comment" autocomplete="off" maxlength="100" size="large" style="height: 200px"
                    :show-word-limit="true" :rows=8 type="textarea" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="resetForm(ruleFormRef)">关闭</el-button>
                <el-button type="primary" @click="CommentsClick()">
                    发送
                </el-button>
            </div>
        </template>
    </el-dialog>

</template>


<script setup>
import { ref, onMounted, reactive } from 'vue'

import api from '@/api/index.js'


let tableData = reactive([])
const total = ref()
const currentPage = ref(1)
const pageSize = ref(3)
const disabled = ref(false)
const background = ref(false)

// 评论对话框显示
const dialogFormVisible = ref(false)
const ruleFormRef = ref(null)
const form = reactive({
    com_id: '',
    comment: '',
})
const changeTableData = ref()


onMounted(() => {
    get_info_list("page=1")
})


// 时间格式化
const options = {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
};
const formatter = new Intl.DateTimeFormat('zh-CN', options); // 使用中文（中国）格式

// 获取社区列表数据
const get_info_list = (url) => {
    api.get_community_list(url).then((res) => {
        let modifiedData = { ...res };
        modifiedData.data.results = modifiedData.data.results.map(result => ({
            ...result, // 创建当前结果的浅拷贝
        }));
        tableData.push(modifiedData.data.results)
        total.value = modifiedData.data.count
        // 使用倒序 for 循环来删除 null 值
        for (let i = tableData[0].length - 1; i >= 0; i--) {
            if (tableData[0][i].community_upvote_object.length != 0) {
                for (let index = tableData[0][i].community_upvote_object.length - 1; index >= 0; index--){
                    if (tableData[0][i].community_upvote_object[index].user_upvote_status == null) {
                        tableData[0][i].community_upvote_object.splice(index, 1);
                    }
                }
            }
        }
    })
}

/**
 * 当前页码变化
 *
 * @param val 当前选择的选项值
 */
const handleCurrentChange = (val) => {
    tableData.length = 0;  // 清空数据后重新获取数据
    get_info_list("page=" + val)
}

// 点赞
const likeClick = (id, index, like) => {
    api.like_community(id, like).then((res) => {
        tableData[0][index].giveLike = res.data.count;  // 点赞量
        if (tableData[0][index].community_upvote_object.length != 0) {
            tableData[0][index].community_upvote_object[0].user_upvote_status.likeStatus = "1";
        }else{
            tableData[0][index].community_upvote_object.push({user_upvote_status: {likeStatus: "1"}})
        }
        
    })
}

// 取消点赞
const nolikeClick = (id, index, like) => {
    api.like_community(id, 'false').then((res) => {
        tableData[0][index].giveLike = res.data.count;
        tableData[0][index].community_upvote_object[0].user_upvote_status.likeStatus = "0";
    })
}

//显示评论对话框并且传递相关的参数
const showDialog = (id, index) => {
    dialogFormVisible.value = true
    form.com_id = id
    changeTableData.value = index
}

// 评论
const CommentsClick = () => {
    api.create_Comment_user(form).then(res => {
        tableData[0][changeTableData.value].comments_Com = res.data.data.comments_Com
        dialogFormVisible.value = false
    })
}

// 重置表单
const resetForm = (formRef) => {
    dialogFormVisible.value = false;
    formRef.resetFields()
}

</script>


<style scoped>
.el-card {
    min-width: 380px;
    margin-right: 20px;
    transition: all .5s;
}

.el-card:hover {
    margin-top: -5px;
}

.mid {
    display: flex;
    position: relative;
    /* 设置为相对定位 */
    /* justify-content: space-between;s */
}


.demo-pagination-block {
    display: flex;
    justify-content: center;
    /* 实现水平居中 */
    align-items: center;
    /* 实现垂直居中 */
    flex-direction: column;
}


.left {
    margin-right: 50px;
    /* 右侧边框设为黑色竖线 */
}

.right {
    margin-right: 50px;
    /* 右侧边框设为黑色竖线 */
}

.content {
    width: 700px;
    /* margin-left: auto; */
}

.last_right_like {
    position: absolute;
    /* 子元素使用绝对定位 */
    top: 0;
    /* 顶部对齐 */
    right: 0;
    /* 右边对齐 */
}

.last_right_no_like {
    display: none;
    /* 初始状态为隐藏 */
    position: absolute;
    /* 子元素使用绝对定位 */
    top: 0;
    /* 顶部对齐 */
    right: 0;
    /* 右边对齐 */
}

.infinite-list {
    height: 300px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary);
}

.infinite-list .infinite-list-item+.list-item {
    margin-top: 10px;
}
</style>